<template>
  <template v-for="menu in items">
    <el-sub-menu v-if="menu.items" :key="menu.id" :index="menu.id + ''">
      <template #title>
        <el-icon :size="20"><component :is="menu.icon" /></el-icon><span>{{ menu.label }}</span>
      </template>
      <menu-item :items="menu.items" @command="$emit('command', $event)" />
    </el-sub-menu>
    <el-menu-item
      v-else
      :key="menu.id"
      :index="menu.id + ''"
      @click="$emit('command', menu.command)"
    >
      <el-icon :size="20"><component :is="menu.icon" /></el-icon>
      <template #title>{{ menu.label }}</template>
    </el-menu-item>
  </template>
</template>
<script lang="ts" setup>
  import { Menu } from './menu';
  import MenuItem from './EpxMenu.vue';

  defineProps<{
    items: Array<Menu>;
  }>();

  defineEmits(['command']);
</script>

<style scoped></style>
